<template>
  <div>
    <el-dialog title="升级会员" width="800px" :before-close="handleClose" append-to-body :visible.sync="memberBox">
      <div>
        <member v-if="step == 1" :dataList="dataList" @ok="memberOk"></member>
        <member-pay v-if="step ==2" :dataList="dataList" :member="memberData" @back="step--" @ok="payOk"></member-pay>
        <member-code ref="mc" v-if="step ==3" :member="codeData" @back="step--"></member-code>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import member from "@/components/Member/index";
import memberPay from "@/components/MemberPay/index";
import memberCode from "@/components/MemberCode/index";
import { getMemberLevelList, getPayQrCode, getPayResult } from "@/api/member/memberLevel";

export default {
  name: "Register",
  components: {
    member,
    memberPay,
    memberCode
  },
  data() {
    return {
      memberBox: false,
      payBox: false,
      dataList: [],
      memberData: {},
      codeData: {},
      step: 0,
      codeUrl: "",
      timer: null,
    };
  },
  created() {

  },
  methods: {
    open() {
      getMemberLevelList().then(res => {
        this.dataList = res.data;
        this.memberBox = true;
        this.step = 1;
      }).catch(() => {

      })
    },
    memberOk(e) {
      this.step = 2;
      this.memberData = e;
      if(e.level < 2){
        this.dataList.forEach(item => {
        	if(item.level > 1){
            this.memberData = item;
            throw Error();
          }
        });
      }
    },
    payOk(e) {
      this.clearTime();
      getPayQrCode(e).then(res => {
         this.startQuery(res.data);
         this.codeData = res.data;
         this.step = 3;
      }).catch(() => {

      })
    },
    clearTime() {
      clearInterval(this.timer);
    },
    startQuery(e) {
      this.timer = setInterval(() => {
      	this.queryPay(e);
      }, 1000);
    },
    queryPay(e) {
      getPayResult(e).then(res => {
        if('PAY_SUCESS' == res.data.status){
          this.$refs.mc.payOk();
          this.clearTime();
        }
      }).catch(() => {

      })
    },
    handleClose() {
      this.clearTime();
      this.memberBox = false;
    },
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">

</style>
